<!--suppress ALL -->
<include file="./Template/header.html" />

<link rel="stylesheet" type="text/css" href="/Template/css/index.css">
<script type="text/javascript" src="/Template/js/amazeui.js"></script>
<script type="text/javascript">

	var categoryId = 0;

	$(function() {

		//初始化页面配置
		initPage("去开团", "index");

		var app = new Vue({
			el: '#container',
			data: {
				productList: [],
			},
			methods: {
				index: indexPage,
				order: orderPage,
				rank: rankPage,
				center: centerPage,
				jump: function(url) {
					window.location.href = url;
				},
			}
		})

		$('.am-slider').flexslider({
			animationLoop: false,
		});

		$('.btn').on('click',function(){
			$('.user-pay').addClass('active');
			setTimeout(function(){
				$('.user-pay').removeClass('active');
			},2000);
		})

		bindCountDown();
		bindProgress();
		resetProductList(0);

		$(".nav-bar li.bar").bind("click", function() {

			var _categoryId = $(this).attr("categoryId");

			if(_categoryId != categoryId) {

				app.productList = [];
				pageNum = 1;

				categoryId = _categoryId;

				$(this).parent().find("li").each(function() {
					if($(this).hasClass("active")) {
						$(this).removeClass("active")
					}
				});
				$(this).addClass("active");

				isNeedRefresh = false;
				resetProductList(categoryId);
			}

		});


		function countDown(obj) {

			setInterval(function() {

				//var endTime = new Date(obj.attr("endtime").replace(/-/g,","));
				
				var ua = navigator.userAgent.toLowerCase();	
				if (/iphone|ipad|ipod/.test(ua)) {
					var endTime = safariDate(obj.attr("endtime"));	
				} else if (/android/.test(ua)) {
					var endTime = new Date(obj.attr("endtime").replace(/-/g,","));		
				}
				var timeGap = getTimeGap(new Date(), endTime, "hours");

				obj.find(".hours").html(timeGap["hours"]);
				obj.find(".minute").html(timeGap["minutes"]);
				obj.find(".second").html(timeGap["seconds"]);

			}, 1000);

		}

		function bindCountDown() {
			$(".countDown[status=0]").each(function() {
				$(this).attr("status", 1);
				countDown($(this));
			});
		}

		function bindProgress() {

			$(".goods-bg[progress=0]").each(function() {

				$(this).attr("progress", 1);

				var total = $(this).attr("total");
				var join = $(this).attr("join");

				var proportion = parseFloat(join/total);
				var progressImg = $(this).find(".progress-img").width();
				var progressImgRed = $(this).find(".progress-img-red").width(progressImg*proportion);
				$('.progress-img-red').css('width',progressImgRed);

			});
		}

		var pageNum = 2;
		var isNeedRefresh = false;

		$(window).scroll(function(){
			var scrollTop = $(this).scrollTop();
			var scrollHeight = $(document).height();
			var windowHeight = $(this).height();
			if(!isNeedRefresh &&
					(scrollHeight - scrollTop - windowHeight <= 25)){
				isNeedRefresh = true;
				refreshPage(pageNum++);
			}
		});

		function refreshPage(pageNum) {
			$.ajax({
				url:"/wechat/index/productList",
				type:"post",
				data:{
					categoryId: categoryId,
					pageNum:pageNum,
				},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					if(!isNullOrEmpty(data)) {
						if(pageNum == 1 && categoryId == 0){
							app.productList = data;
						}else{
							app.productList = app.productList.concat(data);
						}
						isNeedRefresh = false;
						setTimeout(bindCountDown, 200);
						setTimeout(bindProgress, 200);
					}
				},
			})
		}

		function resetProductList(categoryId) {

			$.ajax({
				url:"/wechat/index/productList",
				type:"post",
				data:{
					categoryId: categoryId,
					pageNum:1,
				},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					pageNum = 2;
					app.productList = data;
					setTimeout(bindCountDown, 200);
					setTimeout(bindProgress, 200);
				},
			})

		}

		var demo = document.getElementById("demo");
		var demo1 = document.getElementById("demo1");
		var demo2 = document.getElementById("demo2");
		$('#demo1 ul li').each(function(){
			$(this).css('min-width',screen.width);
		})
		demo2.innerHTML=document.getElementById("demo1").innerHTML;
		function Marquee(){
			if(demo.scrollLeft-demo2.offsetWidth>=0){
				demo.scrollLeft-=demo1.offsetWidth;
			}
			else{
				demo.scrollLeft++;
			}
		}
		var myvar=setInterval(Marquee,30);

	});

	function detail(id) {
		window.location.href = "/wechat/product/index/id/" + id;
	}
	function groupList(id) {
		window.location.href = "/wechat/product/waitingGroup/id/"+id;
	}

	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId: '{$appid}', // 必填，公众号的唯一标识
		timestamp: '{$signature.timestamp}', // 必填，生成签名的时间戳
		nonceStr: '{$signature.noncestr}', // 必填，生成签名的随机串
		signature: '{$signature.signature}', // 必填，签名，见附录1
		jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});

	wx.ready(function(){

		var shareData = {
			imgUrl    :    'http://resource.91memo.cn/image/4ff324e0fe3b652b3fd28da21eaa2578.png',
			link     :     '{$shareUrl}',
			title     :    '组团夺宝',
			desc     :     '一人中奖，全团中奖！来不及解释了，快上车！'
		};

		wx.onMenuShareAppMessage(shareData);
		wx.onMenuShareTimeline(shareData);
	});

</script>

<div class="index">
	<div class="nav">
		<ul class="nav-bar">
			<li class="active" v-on:click="index">首页</li>
			<foreach name="categoryList" item="vo">
				<li class="bar" categoryId="{$vo.category_id}">{$vo.category_name}</li>
			</foreach>
		</ul>
	</div>
	<div class="nav-img">
		<div class="am-slider am-slider-default" id="demo-slider-0">
			<ul class="am-slides nav-img-ul">
				<foreach name="bannerList" item="vo">
					<li v-on:click="jump('{$vo.target_url}')">
						<img src="{$vo.image_url}">
					</li>
				</foreach>
			</ul>
		</div>
		<div class="user-pay">
			<div class="user-pay-content">
				<div class="user-img"></div>
				<div class="user-name"></div>
				<div class="pay-text">刚刚下单</div>
				<p class="pay-time"></p>
			</div>
		</div>
	</div>
	<!-- <div id="moocBox" class="scroll-nav">
	    <ul>
			<foreach name="announcementList" item="vo">
				<li>
					<a href="javascript:void(0)">{$vo.content}</a>
				</li>
			</foreach>
	    </ul>
	</div> -->
	<div id="demo" class="qimo8">
		<div class="qimo">
		    <div id="demo1">
		        <ul>
					<foreach name="announcementList" item="vo">
						<li>
							<a href="javascript:void(0)">{$vo.content}</a>
						</li>
					</foreach>
			    </ul>
		    </div>
		    <div id="demo2"></div>
	    </div>
	</div>
	<div class="zone">
		<foreach name="guideList" item="vo">
			<div class="operating-zone" v-on:click="jump('{$vo.target_url}')">
				<div class="icon-zone" style="background: url('{$vo.icon_path}')no-repeat center;background-size: cover;"></div>
				<p class="color-9b">{$vo.name}</p>
			</div>
		</foreach>
	</div>
	<div v-if="productList == null || productList == ''" class="index-no-data">暂无拼团，<a href="">去开团</a></div>
	<div class="goods-details" v-for="product in productList">
		<div class="goods-bg" progress="0" total="{{product.price}}" join="{{product.join_number}}">
			<div class="icon-deadline">
				<p class="countDown" endtime="{{product.end_time}}" status="0">
					<span class="hours">00</span>
					<span>:</span>
					<span class="minute">00</span>
					<span>:</span>
					<span class="second">00</span>
				</p>
			</div>
			<div class="icon-count">
				<p>第{{product.current_round}}轮</p>
			</div>
			<div class="goods-img" style="background: url('{{product.image}}')no-repeat center;background-size: 100% 15rem;" onclick="detail('{{product.product_id}}')"></div>
			<p class="goods-title">{{product.product_name}}</p>
			<div class="the-goods-red">
				<div>总需 {{product.price}}</div>
				<div>本轮还需 {{product.price-product.join_number}}</div>
			</div>
			<span class="progress color-99">进度</span>
			<div class="progress-img"></div>
			<div class="progress-img-red"></div>
			<!-- <div class="goods-price color-font"><span>￥</span><span class="goods-price-all">{{product.price}}</span></div>
			<div class="remain-price color-99">(剩余<span class="color-font">{{product.price-product.join_number}}</span>份)</div> -->
			<div class="join-btn" onclick="groupList('{{product.round_id}}')">
				<p>别人的团({{product.group_number}})</p>
			</div>
			<div class="open-btn" onclick="detail('{{product.product_id}}')">
				<p>去开团 >></p>
			</div>
		</div>
	</div>
</div>

<include file="./Template/footer.html" />